<template>
	<view class="template-index index_content tn-safe-area-inset-bottom">

		<view class="top-content">
			<view class="top_title">要记账</view>
			<view class="top-summary tn-flex tn-flex-row-center tn-flex-col-center">
				<view class="left_date">
					<view class="year tn-margin-bottom-sm">{{selectYear}}年</view>
					<view class="moneth_content" @click="getDate">
						<text class="title">{{selectMonth}}</text>
						<text class="moneth_name">月<text class="down tn-icon-down-triangle"></text></text>
					</view>
				</view>
				<view class="right_summary tn-flex tn-flex-row-center tn-flex-col-center">
					<view class="right_item">
						<view class="title tn-margin-bottom-sm">收入</view>
						<view class="statisticscontent value">
							<tn-count-to :startVal="0" :endVal="sumInMoney"></tn-count-to>
						</view>
					</view>
					<view class="right_item">
						<view class="title tn-margin-bottom-sm">支出</view>
						<view class="statisticscontent value">
							<tn-count-to :startVal="0" :endVal="sumOutMoney"></tn-count-to>
						</view>
					</view>
				</view>
			</view>

			<view class="function-content tn-flex tn-margin-xs tn-padding-top-sm tn-padding-bottom-sm">
				<block v-for="(item, functionIndex) in topFunctionList" :key="functionIndex">
					<view class="tn-flex-1 tn-margin-xs tn-radius" @click="toolClick(item)">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view :class="functionItemStyle(item)" class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
								<view :class="'tn-icon-'+ item.icon +'-fill'"></view>
							</view>
							<view class="tn-color-black tn-text-center">
								<text class="tn-text-ellipsis">{{item.title}}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<view class="index_content_list" :style="indexContentListStyle">
			<block v-if="lastDataList.length > 0">
				<view class="card" v-for="(parent,index) in lastDataList" :key="index">
					<view class="header tn-flex tn-flex-row-center tn-flex-col-center">
						<view class="header_title">{{ parent.timekey }}</view>
						<view class="right tn-flex tn-flex-row-center tn-flex-col-center">
							<view class="item tn-color-gray">
								<text class="title">收入</text>
								<text class="value">{{parent.sumInMoney}}</text>
							</view>
							<view class="item tn-color-gray">
								<text class="title">支出</text>
								<text class="value">-{{parent.sumOutMoney}}</text>
							</view>
						</view>
					</view>
					<view class="body">
						<block v-for="(item, index) in parent.dataList" :key="index">
							<tn-list-cell class="tn-list" unlined>
								<view class="list-icon-text tn-flex tn-flex-col-center tn-flex-row-between">
									<view class="list__left  tn-flex tn-flex-col-center tn-flex-row-left">
										<view class="list__left__icon iconfont" style="background-color: #efefef;" :class="'icon-' + item.categoryInfo.dictKey"></view>
										<view class="list__left__text">{{item.categoryInfo.dictValue}}</view>
									</view>
									<view class="list__right tn-flex tn-flex-col-center tn-flex-row-between">
										<view class="list__right__text">-{{ $common.rmoney(item.money * 100) }}</view>
									</view>
								</view>
							</tn-list-cell>
						</block>
					</view>
				</view>
			</block>
			<view v-else class="noData"><tn-empty mode="data" :iconSize="120" :textSize="30"></tn-empty></view>
		</view>
		<tn-picker mode="time" :defaultTime="defaultTime" v-model="selectTimerShow" :params="params" @confirm="selectTimerConfim"></tn-picker>
	</view>
</template>

<script>
	import { list } from '@/api/account/record.js';
	import { getDictList } from '@/api/sys/dict';
	import { account_out_type_key, account_in_type_key, accountRecordTypes } from '@/utils/enums';
	export default {
		name: 'Index',
		data() {
			return {
				selectYear: '',
				selectMonth: '',
				sumOutMoney: '0.00',
				sumInMoney: '0.00',
				selectTimerShow: false,
				defaultTime: null,
				// 只显示年月日
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				categoryList: [],
				topFunctionList: [{
						title: '房贷计算器',
						color: 'purplered',
						icon: 'count',
						url: '/pages/tools/housecalc/index',
					},
					{
						title: '养老计算器',
						color: 'indigo',
						icon: 'identity',
						url: '/pages/tools/oldcalc/index',
					},
					{
						title: '预算管理',
						color: 'purple',
						icon: 'pay',
						url: '/pages/account/budget/index',
						animationType: 'slide-in-bottom'
					},
					{
						title: '更多',
						color: 'orange',
						icon: 'more-circle',
						url: '/pages/tools/index'
					}
				],
				resultDataList: [],
				lastDataList: []

			}
		},
		created() {
			let currDate = new Date();
			this.selectYear = currDate.getFullYear();
			this.selectMonth = currDate.getMonth() + 1;
			this.defaultTime = this.$common.timeFormat(currDate);
			this.getCategoryList(account_out_type_key);
			this.getCategoryList(account_in_type_key);
			this.getData();
		},
		watch: {},
		computed: {
			functionItemStyle() {
				return function(item) {
					return `tn-main-gradient-${item.color}--light tn-color-${item.color}`;
				}
			},
			indexContentListStyle() {
				if (this.lastDataList.length == 0) {
					return {
						height: `calc(100vh - 52px - 480rpx + var(--status-bar-height))`
					}
				}

			}
		},
		methods: {
			selectTimerConfim(result) {
				if (this.selectYear != result.year || this.selectMonth != result.month) {
					this.selectYear = result.year;
					this.selectMonth = result.month;
					this.defaultTime = result.year + "-" + result.month + "-01";
					this.getData();
				}
			},
			getDate() {
				this.selectTimerShow = true;
			},
			/**获取分类的接口
			 * @param {Object} code
			 */
			getCategoryList(code) {
				getDictList({
					queryParams: {
						F_code_eq: code,
						F_parentId_neq: 0
					}
				}).then(res => {
					this.categoryList = this.categoryList.concat(res.result);
				})
			},
			/**
			 * 工具栏目点击
			 * @param {Object} item
			 */
			toolClick(item) {
				if (!item.url) {
					this.$common.msg('等待实现');
				}
				let options = {};
				if (item.animationType) {
					options.animationType = item.animationType;
				}

				this.$common.navigateTo(item.url, options);
			},
			/**
			 * 请求完数据之后 需要处理数据信息
			 */
			handlerResultData() {
				let lastDataList = [],
					timeKeyList = [];
				this.resultDataList.forEach(item => {

					if (timeKeyList.indexOf(item.accountTime) < 0) {
						timeKeyList.push(item.accountTime);
					}
				});
				timeKeyList.forEach(timekey => {
					let itemTime = {
						timekey: timekey,
						sumOutMoney: 0,
						sumInMoney: 0,
						dataList: []
					}
					itemTime.dataList = this.resultDataList.filter(item => item.accountTime == timekey);
					let sumOutMoney = 0;
					let sumInMoney = 0;
					itemTime.dataList.forEach(item => {
						let category = this.categoryList.find(category => category.id == item.categoryType);
						item["categoryInfo"] = category;
						if (category.code = account_out_type_key) {
							sumOutMoney = Number(sumOutMoney) + Number(item.money);
						} else if (category.code = account_in_type_key) {
							sumInMoney = Number(sumInMoney) + Number(item.money);
						}
					})
					this.sumInMoney = Number(this.sumInMoney) + Number(sumInMoney);
					this.sumOutMoney = Number(this.sumOutMoney) + Number(sumOutMoney);
					this.sumOutMoney += Number(sumOutMoney);
					itemTime.sumOutMoney = sumOutMoney;
					itemTime.sumInMoney = sumInMoney;
					lastDataList.push(itemTime);
				});
				this.lastDataList = lastDataList;
			},
			/**
			 *获取数据信息
			 */
			getData() {
				this.sumOutMoney = 0;
				this.sumInMoney = 0;
				let startDate = this.selectYear + "-" + this.selectMonth + "-01 00:00:00";
				let endDate = this.$common.getLastDayOfMonth(new Date(startDate)) + " 23:59:59";
				list({
					"page": 1,
					"pageSize": 10000,
					"queryParams": {
						"F_accountType_eq": 0,
						"ORDER_accountTime_desc": 1,
						"F_accountTime_gte": startDate,
						"F_accountTime_lte": endDate
					}
				}).then(res => {
					this.resultDataList = res.result?.items;
					this.handlerResultData();
				}).finally(res => {});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.template-index {
		max-height: 100vh;
		min-height: 100vh;
	}

	.index_content {
		.index_content_list {
			.noData {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			margin: 0rpx 0rpx 0rpx;
			margin-top: calc(440rpx + var(--status-bar-height));

			.card {
				border-bottom: 1rpx solid rgb(214, 215, 217);

				.header {
					justify-content: space-between;

					padding: 20rpx 16rpx;

					.header_title {
						font-size: 30rpx;
						flex: 1;
					}

					.right {
						.item {
							&:first-child {
								margin-right: 10rpx;
							}

							.title {
								margin-right: 10rpx;
							}
						}
					}
				}

				.body {
					.tn-list {
						padding-left: 16rpx;
						padding-right: 16rpx;
					}

					.list-icon-text {
						.list {
							&__left {
								&__icon {
									width: 60rpx;
									height: 60rpx;
									border-radius: 50%;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 30rpx;
									font-weight: bolder;
									margin-right: 18rpx;
								}

								&__text {
									font-size: 30rpx;
									color: #333;
								}
							}
						}
					}
				}

			}

		}

		.function-content {
			background-color: #FFF;
			border-radius: 10px;
			border-radius: 7px;
			box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
			margin-top: 0px;
			margin-bottom: 0px;

			.icon12 {
				&__item {
					width: 30%;
					background-color: #FFFFFF;
					border-radius: 10rpx;
					padding: 30rpx;
					margin: 20rpx 10rpx;
					transform: scale(1);
					transition: transform 0.3s linear;
					transform-origin: center center;

					&--icon {
						width: 60rpx;
						height: 60rpx;
						font-size: 40rpx;
						border-radius: 50%;
						margin-bottom: 14rpx;
						position: relative;
						z-index: 1;
					}
				}
			}
		}


		.top-content {
			background-color: $base-color;
			width: 100%;
			position: fixed;
			top: 0px;
			z-index: 999;
			height: calc(380rpx + var(--status-bar-height));

			.top_title {
				text-align: center;
				height: 100rpx;
				margin-top: var(--status-bar-height);
				line-height: 100rpx;
				font-size: 40rpx;
				font-weight: bold;
			}

			.top-summary {
				padding: 0rpx 20rpx;
				height: 120rpx;
				margin-bottom: 40rpx;

				.left_date {
					width: 160rpx;

					.year {
						font-size: 30rpx;
						color: #997a2a;
					}

					.moneth_content {
						border-right: 1rpx solid #333;

						.moneth_name {
							color: #000000;
							font-size: 30rpx;
							margin-left: 10rpx;
						}

						.down {
							font-size: 40rpx;
						}

						.title {
							font-size: 36rpx;
						}
					}
				}

				.right_summary {
					flex: 1;
					margin-left: 30rpx;

					.right_item {
						flex: 1;

						.title {
							font-size: 30rpx;
							color: #997a2a;
						}

						.statisticscontent {
							.tn-count-num-class {
								font-size: 36rpx !important;
							}
						}
					}
				}
			}
		}
	}
</style>